<template>
	<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
		<view class="message-list">
			<view class="message-item" v-for="item in dataList" :key="item.id" @tap="showMessageInfo(item)">
				<text class="message-item-time">{{item.pushDate}}</text>
				<view class="message-item-container">
					<text class="message-item-container-title">{{item.title}}</text>
					<text class="message-item-container-content">{{item.content}}</text>
					<view class="message-item-bottom">
						<view class="line msg-line"></view>
						<text>查看详情</text>
						<xh-icon icon="icon_jiantou"></xh-icon>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getMessageList } from '@/common/api/api.js'
	const pagingRef = ref(null)
	const dataList = ref([])
	// 消息详情
	const showMessageInfo = (item) => {
		const data = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url: `/pages/my/message/message-info?data=${data}`
		})
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		const res = await getMessageList({ pushObject: '03' }, pageNo)
		const list = res.result
		if(pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value,...list]
		pagingRef.value.completeByTotal(list,res.page.totalElements)
	}
</script>

<style lang="scss" scoped>
	.message-list {
		padding-bottom: 30rpx;
		.message-item {
			display: flex;
			flex-direction: column;
			.message-item-time {
				padding: 20rpx 30rpx;
				text-align: center;
			}
			.message-item-container {
				display: flex;
				flex-direction: column;
				background-color: #ffffff;
				margin: 0 30rpx;
				padding: 30rpx 30rpx 0;
				border-radius: 16rpx;
				.message-item-container-title {
					color: $xh-color-3;
					font-size: 28rpx;
				}

				.message-item-container-content {
					color: $xh-color-6;
					font-size: 26rpx;
					margin: 16rpx 0;
				}

				.message-item-bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: $xh-color-9;
					position: relative;
					padding: 20rpx 0;
					.msg-line{
						top: 0;
					}
				}
			}
		}
	}
</style>